<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>队员管理</title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../../../plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <link rel="stylesheet" href="../../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="../../../../dist/css/fonts.css" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" id="navbar_menu">
            <!-- Left navbar links -->
        </nav>
        <!-- /.navbar -->
        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4" id="sidebar_menu">
        </aside>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>队员管理</h1>
                        </div>
                    </div>
                </div>
            </section>

            <div class="content">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">成员列表</h3>
                                <button type="button" class="btn  btn-success btn-xs " style="width:60px;float:right"
                                    data-toggle="modal" data-target="#modal_add">添加成员</button>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0">
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center;">学号</th>
                                            <th style="text-align: center;">名字</th>
                                            <th style="text-align: center;">专业</th>
                                            <th style="text-align: center;">地址</th>
                                            <th style="text-align: center;">生日</th>
                                            <th style="text-align: center;">QQ</th>
                                            <th style="text-align: center;">邮箱</th>
                                            <th style="text-align: center;">电话</th>
                                            <th style="text-align: center;">微信</th>
                                            <th style="text-align: center;">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="pageBody">
                                        <td valign="top" colspan="8" class="dataTables_empty" style="text-align:center">
                                            空空如也~
                                        </td>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer clearfix">
                                <ul class="pagination pagination-sm m-0 float-right" id="turnPages">
                                    <li class="page-item dropdown" style="margin-top:-5px" data-page="-2">
                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
                                            每页10条 <span class="caret"></span>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" tabindex="5" href="" onclick="return false">5</a>
                                            <a class="dropdown-item" tabindex="10" href="" onclick="return false">10</a>
                                            <a class="dropdown-item" tabindex="20" href="" onclick="return false">20</a>
                                            <a class="dropdown-item" tabindex="30" href="" onclick="return false">30</a>
                                            <a class="dropdown-item" tabindex="40" href="" onclick="return false">40</a>
                                            <a class="dropdown-item" tabindex="50" href="" onclick="return false">50</a>
                                        </div>
                                    </li>
                                    <li class="page-item" data-page="0">
                                        <a class="page-link" href="javascript:void(0);">&laquo;</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="modal fade" id="modal_changeRole">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header" style="border:none">
                    <h4 class="modal-title">是否添加为接线员</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-footer justify-content-between" style="border:none">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeBtn">取消</button>
                    <button type="button" class="btn btn-primary" id="changeRole_btn">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal_resetPsw">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header" style="border:none">
                    <h4 class="modal-title">是否要重置密码</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-footer justify-content-between" style="border:none">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeBtn">取消</button>
                    <button type="button" class="btn btn-primary" id="resetPsw_btn">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal_delete">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header" style="border:none">
                    <h4 class="modal-title">是否删除该成员</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-footer justify-content-between" style="border:none">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeBtn">取消</button>
                    <button type="button" class="btn btn-primary" id="delete_btn">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal_add">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">添加成员</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">

                                <label for="">学号</label>

                            </div>
                            <div class="col-6">

                                <label for="">姓名</label>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <input type="text" class="form-control" id="add_account_input" placeholder="请输入学号"
                                    maxlength="15">
                            </div>
                            <div class="col-6">
                                <input type="text" class="form-control" id="add_name_input" placeholder="请输入姓名"
                                    maxlength="10">
                            </div>
                        </div>


                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submit_add_btn">提交</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- jQuery -->
    <script src="../../../../plugins/jquery/jquery.min.js"></script>
    <script>
        // 引入左边导航栏
        $.get("../../../../bars/Admin/admin_sidebar.html", function (data) {
            // console.log(data)
            $("#sidebar_menu").html(data);
        })
        //引入上边导航栏 
        $.get("../../../../bars/Admin/admin_navbar.html", function (data) {
            $("#navbar_menu").html(data);
        })
    </script>

    <!-- Bootstrap 4 -->
    <script src="../../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../../../../plugins/sweetalert2/sweetalert2.min.js"></script>
    <script src="../../../../dist/js/adminlte.min.js"></script>
    <script>
        function null2str(data) {
            for (let x in data) {
                if (data[x] === null) { // 如果是null 把直接内容转为 ''
                    data[x] = '';
                } else {
                    if (Array.isArray(data[x])) { // 是数组遍历数组 递归继续处理
                        data[x] = data[x].map(z => {
                            return null2str(z);
                        });
                    }
                    if (typeof (data[x]) === 'object') { // 是json 递归继续处理
                        data[x] = null2str(data[x])
                    }
                }
            }
            return data;
        }
        const Toast = Swal.mixin({
            toast: true,
            showConfirmButton: false,
            timer: 1500
        });
        let page_limit = 10
        let page_current = 1
        let max_page
        let current_id
        $(function () {
            $.ajax({
                type: 'POST',
                url: '/admin/getMemberList',
                async: true,
                data: {
                    "page": page_current,
                    "limit": page_limit,
                    "role": "队员"
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    max_page = Math.ceil(JSON.parse(res).data.length / page_limit)
                    buildTableFooter(max_page)
                    buildTableBody(JSON.parse(res).data)
                },
                error: function (err) {
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
        })
        function buildTableFooter(data) {
            let pageNum = data
            console.log(pageNum)
            if (pageNum === 0) {
                pageNum = 1
                max_page = 1
            }
            console.log(pageNum)
            let $a
            // console.log($("#turnPages").children("li:first"))
            $("#turnPages").children("li:first").next().nextAll().remove()
            let $arrow = '<li class="page-item" data-page="-1"><a class="page-link" href="javascript:void(0);">&raquo;</a></li>'
            $("#turnPages").children("li:first").next().after($arrow)
            for (let i = pageNum; i > 0; i--) {
                $a = "<li class=\"page-item\" data-page=\"" + i + "\"><a class=\"page-link\" href=\"javascript:void(0);\" >" + i + "</a></li>"
                $("#turnPages").children("li:first").next().after($a)
            }
            // $("#turnPages").children("li:first").next().next().addClass("active")

            $("#turnPages").children().eq(page_current + 1).addClass("active")
        };
        function buildTableBody(data) {
            null2str(data)
            let $tr
            if (data.length === 0) {
                $("#pageBody").empty()
                $tr = ' <td valign="top" colspan="8" class="dataTables_empty" style="text-align:center">空空如也~</td>'
                $("#pageBody").append($tr)
            }
            else {
                let pageData = data.reverse()
                $("#pageBody").empty()
                $tr = new Array()
                console.log(pageData.length)
                for (let i = 0; i < pageData.length; i++) {
                    $tr = []
                    $tr.push("<tr id=\"" + i + "\">")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].account + "</td >")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].name + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].major + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].address + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].birthday + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].qq + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].email + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].phone + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].weChat + "</td>")


                    $tr.push("<td style=\"text-align: center;\"><button type=\"button\" class=\"btn  btn-info btn-xs select_btn\"  style=\"width:100px\"id=\"detail_btn\" data-toggle=\"modal\" data-target=\"#modal_changeRole\">添加为接线员</button>")
                    $tr.push("<button type=\"button\" class=\"btn btn-success btn-xs select_btn\" style=\"width:80px;margin-left:5px\" data-toggle=\"modal\" data-target=\"#modal_resetPsw\">重置密码</button>")
                    $tr.push("<button type=\"button\" class=\"btn btn-danger btn-xs select_btn\" style=\"width:80px;margin-left:5px\" data-toggle=\"modal\" data-target=\"#modal_delete\" >删除成员</button></td>")

                    $tr.push("</tr>")
                    $tr = $tr.join("")
                    $("#pageBody").append($tr)
                }
                $("#pageBody").on("click", ".select_btn", function (data) {
                    console.log("点击")
                    current_id = parseInt($(this).parent().parent().children("td:first").text())
                })
            }
        }
        $("#changeRole_btn").on("click", function () {

            $.ajax({
                type: 'POST',
                url: '/admin/addOperator',
                async: true,
                data: {
                    "account": current_id
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    if (JSON.parse(res).statusCode === "200") {
                        Toast.fire({
                            icon: 'success',
                            title: ' 修改成功'
                        })
                        setTimeout(function () { window.location.href = "./memberList" }, 1000);
                        return false
                    } else if (JSON.parse(res).statusCode === "400") {
                        Toast.fire({
                            icon: 'error',
                            title: ' 修改失败，权限不符合修改规定！'
                        })
                    } else if (JSON.parse(res).statusCode === "202") {
                        Toast.fire({
                            icon: 'error',
                            title: ' 修改失败，没有找到该成员信息，请先添加成员！'
                        })
                    } else {
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }

                },
                error: function (err) {
                    console.log(err)
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
        })
        $("#resetPsw_btn").on("click", function () {

            $.ajax({
                type: 'POST',
                url: '/admin/resetPassWord',
                async: true,
                data: {
                    "account": current_id
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    if (JSON.parse(res).statusCode === "200") {
                        Toast.fire({
                            icon: 'success',
                            title: ' 重置成功'
                        })
                        setTimeout(function () { window.location.href = "./memberList" }, 1000);
                        return false
                    } else {
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }
                },
                error: function (err) {
                    console.log(err)
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
        })
        $("#delete_btn").on("click", function () {

            $.ajax({
                type: 'POST',
                url: '/admin/deleteMember',
                async: true,
                data: {
                    "account": current_id
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    if (JSON.parse(res).statusCode === "200") {
                        Toast.fire({
                            icon: 'success',
                            title: ' 删除成功'
                        })
                        setTimeout(function () { window.location.href = "./memberList" }, 1000);
                        return false
                    } else {
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }

                },
                error: function (err) {
                    console.log(err)
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
        })
        $("#submit_add_btn").on("click", function () {
            if ($("#add_name_input").val() != '') {
                if ($("#add_account_input").val() != '') {
                    $.ajax({
                        type: 'POST',
                        url: "/admin/addMember",
                        async: true,
                        dataType: "json",
                        data:
                        {
                            "account": $("#add_account_input").val(),
                            "name": $("#add_name_input").val()
                        },
                        contentType: "application/x-www-form-urlencoded",
                        success: function (res) {
                            console.log(res)
                            console.log(res);
                            if (res.statusCode === "200") {
                                Toast.fire({
                                    icon: 'success',
                                    title: ' 添加成功'
                                })
                                setTimeout(function () { window.location.href = "./memberList" }, 1000);

                                return false
                            } else if (res.statusCode === "400") {
                                Toast.fire({
                                    icon: 'error',
                                    title: ' 成员已存在,请勿重复添加！'
                                })
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: ' 请重试'
                                })
                                return false
                            }
                        },
                        error: function (err) {
                            console.log(JSON.stringify(err));
                            Toast.fire({
                                icon: 'error',
                                title: ' 请重试'
                            })
                            return false
                        }
                    });
                } else {
                    Toast.fire({
                        icon: 'error',
                        title: ' 请输入学号'
                    })
                }

            } else {
                Toast.fire({
                    icon: 'error',
                    title: ' 请输入姓名'
                })
            }
        })
    </script>
</body>

</html>